import React, { useState } from 'react';

export const App1 = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      {/*多次调用 setCount 观察页面刷新打印，注意和类组件对比。 */}
      <div>{(() => console.log('render'))()}</div>
      <button onClick={() => setCount(20)}>只修改一次count</button>
    </div>
  );
};

export class App2 extends React.Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        {/*多次调用 setCount 观察页面刷新打印，注意和类组件对比。 */}
        <div>{(() => console.log('render'))()}</div>
        <button onClick={() => this.setState({ count: 20 })}>
          只修改一次count
        </button>
      </div>
    );
  }
}
